L'herència és la capacitat que tenen alguns elements d'heredar algunes propietats dels seus elements contenidors. Els elements contenidors són els pares, avis o besavis dins de l'html.
He creat un arxiu html amb un h1 que té a dins té la paraula CSS entre etiquetes span.
<h1 id="title" class="title">Fonaments de <span>CSS<span>
La paraula CSS dins de les etiquetes es veurà igual que la resta de l'h1. El CSS que hem posat a sota entre etiquetes span però fora de l'h1 es veu d'una manera diferent. L'estil que agafa la paraula CSS no li dona l'etiqueta span sinó les propietats que hereda de l'h1.
Si no s'heredessin certes propietats seria molt caòtic treballar amb CSS. Les propietats que s'hereden o no s'hereden els anireu descobrint poc a poc. Moltes propietats que s'hereden es dedueixen per sentit comú.
Si enlloc de treballar amb background-color, treballem amb la propietat color, apliquem un color al text del h1. El CSS quedaria així:
.title{
color: cyan;
}
Com podeu veure després d'aplicar el color cyan a l'h1, l'span també hereda el color de la lletra. Noteu que el CSS de sota no adquireix el color cyan.
El tamany de la lletra també s'hereda. Si posem font-size a l'h1, l'span també l'adquireix. Els temes de colors i fonts en la majoria d'ocasions, s'hereden.
Muntem un paràgraf amb un classe text, amb un lorem ipsum i a dins un enllaç d'exemple al mig del text.
Si modifiquem el CSS per posar un color vermell a la classe = "text", veurem com el text es torna vermell però l'enllaç roman de color blau.
Això és perquè els enllaços no hereden les propietats dels progenitors. Té sentit que sigui així perquè els enllaços són elements que necessiten ser distinguits i amb un estil propi.
Per donar un color vermell a l'enllaç, hauríem de fer-ho de la següent manera:
.link{
color: red;
}
Ara el color del text dels enllaços es del mateix color del text del paràgraf.
Treballa amb tres elements és molt fàcil però imagineu-vos que tinguessim deu tipus de link i deu tipus de text. Si volguessim que tots els enllaços agafessin el mateix color dels paràgrafs, hauríem de fer canvis a mà. Ens tornaríem una mica bojos.
Existeix un valor anomenat inherit que el que fa és forçar que els fills heredin propietats dels pares quan normalment no les haurien d'heredar.
.link{
color: inherit;
}
Amb inherit estem forçant l'herència. Si ara canviés el color del text a verd, l'enllaç herederia aquest color verd.
Més endavant, hi haurà moments que veureu que certes propietats no s'hereden però us vindria bé que s'heredessin. En aquests casos, podem forçar l'herència.
Podem tenir el cas contrari que seria quan un element hereda una propietat que no volem que s'heredi. Muntem el següent exemple:
<ul class="list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item-extra">Item 4</li>
</ul>
.list-item-extra {
color: initial;
}
Todo allò que heredis, ignora-ho i queda't amb els teus estils per defecte. El tems dels estils per defecte i d¡on surten ho tractarem més endavant.
i tampoc funciona. Al final, quan ha provat moltes maneres i cap funciona, decideix posar un !important
h1.title {
background-color: red !important;
}
i ara si que li funciona!
Què ha passat en realitat?
Quan posem un !important ens estem carregant l'especificitat. !important guanya a totes les puntacions.
Imagineu que arriba un nou desenvolupador web i vol donar estil al h1, segueix la mateixa lògica que el seu precedent i escriu...
h1.title {
background-color: blue !important;
}
Aquesta última sobreescriurà la precedent.
Si treiem el h1 i ho deixem així
.title {
background-color: blue !important;
}
Ara guanya el vermell altre cop!
Quina és el truc per no tornar-se boig a l'hora d'escriure un CSS correcte?
És utilitzar sempre les classes
.title {
background-color: teal;
}
Tot això es modificarà una mica quan treballem amb pseudo-classes i pseudo-elements. Modificarem una mica aquesta regla que hem explicat.
CSS Specificity Graph Generator és una web en la qual es pot mirar si el vostre CSS és correcte o no.
Un gràfic amb molts pics vol dir que esteu tenint molts problemes amb l'especificitat i que el CSS no és bo.
Els estils en cascada funciona sempre que l'especificitat sobre l'element sigui la mateixa.
.title {
background-color: teal;
}
.title {
background-color: yellow;
}
Si la especificitat no és la mateixa, torna a guanyar el color teal.
h1.title {
background-color: teal;
}
.title {
background-color: yellow;
}
Utilitzem sempre classes per la cascada no estigui afectada.